<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <h1>微博列表页面</h1>
  <div v-for="w in arr">
    <h3>{{w.content}}</h3>
    <img :src="w.url" width="100px" alt="">
    <a href="javascript:void(0)" @click="del(w.id)">删除</a>
  </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        arr:[]
      }
    },
   methods:{
     del(id){
       if(confirm("确认删除这条微博么？")){
         axios.post("/delete?id="+id).then(function (response) {
           v.$message.success("删除成功");
           setTimeout(function () {
             location.reload();
           },1500);
         })
       }
     }
   },
   created:function () {
     axios.get("/select").then(function (response) {
       v.arr = response.data;
     })
   }
  })
</script>
</html>